<template>
    <Category :disabled="isShowCom === 1"/>
    <el-card shadow="always" :body-style="{ padding: '20px' }" :style="{marginTop:'30px'}">
        <SpuList v-if="isShowCom === 0" @setState="setState"/>
        <SpuForm v-if="isShowCom === 1" :spuInfo="spuInfo" @setState="setState"/>
        <SkuForm v-if="isShowCom === 2" :spuInfo="spuInfo" @setState="setState"/>
    </el-card>
    
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    name:"Spu"
})
</script>

<script lang="ts" setup>
    import SpuList from './components/SpuList/index.vue';
    import SpuForm from './components/SpuForm/index.vue';
    import SkuForm from './components/SkuForm/index.vue';
    import useAttrStore from '@/stores/attr';
    import { storeToRefs } from 'pinia';
    import type {SpuInfoType} from '@/api/spu'

    //获取仓库实例
    const attrStore = useAttrStore();

    //解构出category3Id
    const {category3Id} = storeToRefs(attrStore);

    //保存SPU完整的属性
    const spuInfo = ref<SpuInfoType>({
        category3Id: category3Id.value,
        description: "",
        spuName:"",
        tmId: null,
        spuImageList: [],
        spuSaleAttrList: [],
    })

    const isShowCom = ref(0)

    //自定义事件跳转组件
    const setState = (state:number,row?:SpuInfoType) => {
        isShowCom.value = state
        if(row){
            spuInfo.value = row
        }else{
            spuInfo.value={
                category3Id: category3Id.value,
                description: "",
                spuName:"",
                tmId: null,
                spuImageList: [],
                spuSaleAttrList: [],
            }
        }
    }
</script>

<style scoped>

</style>